
        // 定义数组
        var arr = [
            {id:1 , name:'张三' , dianhua:'12345678912' , xueli:'本科' , age:20 ,xinzi:"10k"},
            {id:2 , name:'李四' , dianhua:'12345678912' , xueli:'高中' , age:18 ,xinzi:"10k"},
            {id:3 , name:'王五' , dianhua:'12345678912' , xueli:'大专' , age:19 ,xinzi:"10k"},
            {id:4 , name:'赵六' , dianhua:'12345678912' , xueli:'研究生' , age:24 ,xinzi:"10k"},
            

        ]; 

        // 获取标签对象
        var oToby = document.querySelector('tbody');
        // var oTbtn = document.querySelector('.san');
        // var oDiv = document.querySelector('.yi');
        //名字
        var oIptName = document.querySelector('[name="name"]');

        // 电话
        var oIptDh = document.querySelector('[name="dianhua"]');
        //学历
        var oIptXl = document.querySelector('[name="xueli"]');
        // 年龄
        var oAge = document.querySelector('[name="age"]');
        //期望工资
        var oIptGz = document.querySelector('[name="xinzi"]');

        const oTbody = document.querySelector('tbody');


        const oChange = document.querySelector('.change');
        // 确定按钮
        const oBtnEnsureChange = oChange.querySelectorAll('button')[0];
        // 取消按钮
        const oBtnCancelChange = oChange.querySelectorAll('button')[1];
        // 姓名
        const oIptNameChange = oChange.querySelector('[name="name"]');
        // 电话
        const oIptDhChange = oChange.querySelector('[name="dianhua"]');
        // 学历
        const oIptXlChange = oChange.querySelector('[name="xueli"]');
        // 年龄
        const oIptAgeChange = oChange.querySelector('[name="age"]');
        //薪资
        const oIptXzChange = oChange.querySelector('[name="xinzi"]');
        console.log(oIptXl.value);
        //是否button
        var oYes = document.querySelector('.yes');
        var oNo = document.querySelector('.no');
        fun();
        var npx = [];
        oYes.addEventListener('click' , function(){
            var name = oIptName.value ;
            var dianhua = oIptDh.value ;
            var xueli = oIptXl.value ;
            var age = oAge.value;
            var xinzi = oIptGz.value;

                alert('添加成功')
                npx.push(`${name}` , `${dianhua}` , `${xueli}` ,`${age}`,`${xinzi}`)
                // console.log(npx);
                var tt = {};

                
                tt.id = arr.length+1;
                tt.name = npx[0];
                tt.dianhua = npx[1];
                tt.xueli = npx[2];
                tt.age = npx[3];
                tt.xinzi = npx[4];
                arr.push(tt)
                fun();
                ipt()
                // oDiv.style.display = 'none'
                // oIptName.value = '';
                // oIptDh.value = '';
                // oIptXl.value = '';
                // oAge.value = '';
                // oIptGz.value = '';
            })
            
            oNo.addEventListener('click' , function(){
                ipt()

            })

        //点击添加显示输入框
        
        // oTbtn.addEventListener('click' , function(){
        //             oDiv.style.display = 'block'
        //         })
        function fun(){
            // 定义变量储存字符串
        var str = '';

        // 循环遍历数组 生成 tr>td>内容
        arr.forEach(function(item , key){
           
            str += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.dianhua}</td>
                    <td>${item.xueli}</td>
                    <td>${item.age}</td>
                    <td>${item.xinzi}</td>
                    <td><button name="del" index="${key}">删除</button></td>
                    <td><button name="change" index="${key}">修改</button></td>
                    
                </tr> 
            `;
        });

        // 将字符串写入tbody
        oToby.innerHTML = str ;

     

}
            //获取button
        // var oTd = document.querySelectorAll('td')
                // 给 tbody 标签 添加 点击事件
        // 通过 事件委托 实现项目需求
        oTbody.addEventListener('click' , function(e){
            // 根据 e.target 不同的 name 判断点击的是什么标签 执行不同程序

            // 删除程序
            if( e.target.getAttribute('name') === 'del' ){

                // 执行删除程序 

                // 弹出 确认框 点击确定 再执行删除程序
                if( !window.confirm('您确定要删除吗?') ){
                    return ; 
                }

                // 从 数组中 按照 点击 删除按钮存储的索引下标
                // 删除 一个单元
                arr.splice( Number(e.target.getAttribute('index')) , 1 ); 
                console.log(e.target.getAttribute('index'));
                // 根据新数组 动态渲染生成页面
                fun();


            // 修改程序
            }else if( e.target.getAttribute('name') === 'change' ){
                // 让修改的div标签出现
                oChange.style.display = 'flex' ;

                // 给 变量赋值 存储 修改标签 对应的索引下标
                index = Number( e.target.getAttribute('index') ) ;
                console.log(index);
                // 给 修改div中的标签 赋值 对应的 原始数据 
                // 也就是 修改标签索引下标 对应的数组单元 对象中存储的数据
                
                // 姓名 年龄 直接赋值 
                oIptNameChange.value = arr[index].name;
                oIptDhChange.value = arr[index].dianhua;
                oIptXlChange.value = arr[index].xueli;
                oIptAgeChange.value = arr[index].age;
                oIptXzChange.value = arr[index].xinzi;
                // 性别 循环遍历 性别input伪数组
                // 那个标签 value 和 数组对象的sex键值相同 就 添加 checked默认选中

               
                // 城市 循环遍历 城市option伪数组
                // select>option标签 的 内容 和 数组arr中对应的对象的city数据相同
                // 给 这个 select>option标签 添加 选中效果

            }
        })

        // 给 修改 的 确定button 添加 点击事件
        oBtnEnsureChange.addEventListener('click' , function(){
            // 弹出 确认框 点击确定 再执行程序
            if( window.confirm('您确定要修改吗?') ){
                // 获取 修改标签中的数据数值

                // 获取 姓名
                let name = oIptNameChange.value ;
                let dianhua = oIptDhChange.value;
                let xueli = oIptXlChange.value ;
                let age = oIptAgeChange.value-0 ;
                let xinzi = oIptXzChange.value ;
          

                // 修改 点击 的修改标签中存储的索引下标
                // 对应的数值中的对象 存储的数据

                arr[index].name = name;
                arr[index].dianhua = dianhua;
                arr[index].xueli = xueli;
                arr[index].age = age;
                arr[index].xinzi = xinzi;



                // 调用函数 根据新的数组动态渲染生成页面
                fun();

                // 让 修改div 再次隐藏
                oChange.style.display = 'none';

            }
        })

        // 给 修改 的 取消button 添加 点击事件
        oBtnCancelChange.addEventListener('click' , function(){
            // 修改div隐藏
            oChange.style.display = 'none';
        })
   
        function ipt(){
                oIptName.value = '';
                oIptDh.value = '';
                oIptXl.value = '';
                oAge.value = '';
                oIptGz.value = '';
                npx = []
            } 
   


